<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言详情</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="mess-index.css">

    <script src="js/vue3.js"></script>
    <script src="js/axios.min.js"></script>


    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js">
    </script>
    <script src="js/jquery-3.6.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js">
    </script>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="card">
                <div class="card-header">
                    {{current.title}} <span :class="badge()">{{current.plate}}</span>
                </div>
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <p><img class="mess-img" :src="'http://192.168.50.70:8081/images/emo/' + current.emotion"
                            class="card-img-top" alt="..."> {{current.text ? current.text : '暂无内容'}}</p>
                        <footer class="blockquote-footer">{{current.userid}} <cite title="Source Title">
                            {{current.createDatetime}}</cite></footer>
                    </blockquote>
                </div>
            </div>
            
        </div>

    </div>

    <script>
        let app = Vue.createApp({
            data() {
                return {
                    messageid: '',
                    url: "http://192.168.50.70:8081/messagebook/messagebook/",
                    current: {}
                }
            },
            methods: {
                init() {
                    this.messageid = document.cookie.split("=")[1];
                    axios({
                        url: this.url + "list/" + this.messageid,
                        method: "GET",
                    }).then(data => {
                        if (data.data.code == 0) {
                            this.current = data.data.data;
                        }
                    })
                },
                badge() {
                    switch (this.current.plate) {
                        case '抒发情绪':
                            return 'badge badge-primary';
                        case '吐槽':
                            return ' badge badge-secondary';
                        case '紧急事件':
                            return 'badge badge-danger';
                        case '问题反馈':
                            return 'badge badge-warning';
                        default:
                            return 'badge badge-dark'
                    }
                }
            },
            mounted() {
                this.init()
            }

        });
        app.mount("#app")
    </script>

</body>

</html>